<template>
  <a-drawer
    :title="$t('setting.title')"
    placement="right"
    :closable="false"
    v-model:visible="visible"
    @close="handleClose"
    wrapClassName="setting_drawer"
  >
    <div class="setting_container">
      <div class="setting_item">
        <h3 class="title">{{ $t("setting.menuTheme.title") }}</h3>
        <div class="theme_list">
          <image-checkbox :theme-mode="setting.themeMode"></image-checkbox>
        </div>
      </div>
      <div class="setting_item">
        <h3 class="title">{{ $t("setting.theme") }}</h3>
        <div class="theme_list">
          <color-checkbox :colors="setting.palettes"></color-checkbox>
        </div>
      </div>
    </div>
  </a-drawer>
  <a-button
    :class="{ active: visible }"
    class="a_drawer_setting"
    type="primary"
    shape="circle"
    size="large"
    @click="handleShow"
  >
    <template #icon>
      <CloseOutlined v-if="visible" />
      <SettingOutlined v-else />
    </template>
  </a-button>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from "vue";
import { SettingOutlined, CloseOutlined } from "@ant-design/icons-vue";
import ColorCheckbox from "@/components/Drawer/colorCheckbox.vue";
import ImageCheckbox from "@/components/Drawer/imageCheckbox.vue";
import { mapGetters } from "vuex";

export default defineComponent({
  name: "SettingDrawer",
  props: {},
  components: { SettingOutlined, CloseOutlined, ColorCheckbox, ImageCheckbox },
  computed: {
    ...mapGetters(["setting"]),
  },
  setup(props) {
    const visible = ref(false);

    const handleShow = (): void => {
      visible.value = !visible.value;
    };
    const handleClose = (): void => {
      visible.value = false;
    };

    return {
      visible,
      handleShow,
      handleClose,
    };
  },
  //
  mounted() {},
});
</script>

<style lang="scss" scoped>
.a_drawer_setting {
  transition: all 0.4s ease;
  position: absolute;
  z-index: 1001;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  &.active {
    transform: translate(-256px, -50%);
  }
}
.setting_container {
  .setting_item {
    margin-bottom: 24px;
    .title {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 12px;
    }
    .theme_list {
      overflow: hidden;
      @include ft(row, flex-start);
    }
  }
}
</style>

<style lang="scss">
.setting_drawer {
  .ant-drawer-content-wrapper {
    transition: all 0.4s ease !important;
    .ant-drawer-header,
    .ant-drawer-body {
      padding: 10px 24px;
    }
    .ant-drawer-wrapper-body {
      @include scrollBar();
    }
  }
}
</style>